<template>
    <div class="sanstyle">
        <!--左边-->
        <div>
            <div class="ssl">
                <!--标题 B-->
                <div class="sstitle">
                    <div class="twz">
                        <!-- 延庆 叫保护动物 -->
                        <!-- 哈素海 保护鸟类 -->
                        <span class="dwz">今日入区总流量</span>
                        <br />
                        <span class="xwz">Pedestrian traffic flow</span>
                    </div>
                </div>
                <!--标题 E-->

                <!--统计图区域 B-->
                <div class="ecbox" style="height: calc((100% - 2rem) / 2);">
                    <div class="ry_1">
                        <div style="font-size: .16rem;text-align: center;line-height: 0.4rem;color: #fff;">
                            <span>今日入区人/车总流量</span>
                        </div>
                        <div class="ry_3"><span class="ry_2">{{ ll[ix].a
                        }}</span>人&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;<span class="ry_2">{{ ll[ix].b
}}</span>辆车</div>
                        <div class="ry_4">
                            <div><span>当前区内</span></div>
                            <div><span>今日预约</span></div>
                        </div>
                        <div class="ry_5">
                            <div><span class="ry_6">{{ ll[ix].c }}</span>人&nbsp;&nbsp;/&nbsp;&nbsp;<span class="ry_6">{{
                                    ll[ix].d
                            }}</span> 辆车</div>
                            <div><span class="ry_7">{{ ll[ix].e }}</span>人&nbsp;&nbsp;/&nbsp;&nbsp;<span class="ry_7">{{
                                    ll[ix].f
                            }}</span>辆车</div>
                        </div>
                    </div>
                </div>
                <!--统计图区域 E-->

                <div style="height: 0.5rem"></div>
                <!--标题 B-->
                <div class="sstitle">
                    <div class="twz">
                        <span class="dwz">今日入区黑白名单统计</span>
                        <br />
                        <span class="xwz">Black and white list statistics</span>
                    </div>

                </div>
                <!--标题 E-->

                <!--统计图区域 B-->
                <div class="ecbox" style="background: none" id="pie"></div>
                <!--统计图区域 E-->
            </div>
        </div>
        <!--左边-->
        <!--中间 B-->
        <div class="mapbox">
            <div class="xjfb" style="width: 1.4rem; left: 0.34rem">
                <div>
                    <img style="width: 0.15rem; height: 0.15rem" src="/static/images/yqq.png" alt="" />
                    <span>区内人员分布</span>
                </div>
            </div>
            <!--tab切换 B-->
            <div class="qhtab" style="top: .6rem; left: 0.34rem">
                <div>
                    <img src="/static/images/tab1.png" alt="" />
                    <span style="margin-left: 0.08rem">热力图</span>
                </div>
            </div>
            <!--tab切换 E-->
            <div id="map" style="height: 85%; width: 100%; margin-top: 15%"></div>
        </div>
        <!--中间 E-->

        <!--右边 B-->
        <div>
            <div class="ssls">
                <!--标题 B-->
                <div class="sstitles">
                    <div class="twzs">
                        <span class="dwz">今日区内停留时长统计</span>
                        <br />
                        <span class="xwz">Length of stay</span>
                    </div>
                </div>
                <!--标题 E-->
                <!--视频区域 B-->
                <div class="ecbox" id="bar1">

                </div>
                <!--视频区域 E-->
                <div style="height: 0.5rem"></div>
                <!--标题 B-->
                <div class="sstitles">
                    <div class="twzs">
                        <!--  野鸭湖 <span class="dwz">保护区大事记</span>-->
                        <span class="dwz">今日各时段出/入区统计</span>
                        <br />
                        <span class="xwz">Entry and exit statistics</span>
                    </div>
                </div>
                <!--标题 E-->

                <div class="ecbox" style="overflow: hidden; background: none" id="line">

                </div>
            </div>
        </div>
        <!--右边 E-->
    </div>
</template>
  
<script>
import * as echarts from "echarts";
import http from "../utils/http";
import api from "../utils/api";

export default {
    name: "jbxx",
    data() {
        return {
            ll: [
                {
                    a: '578',
                    b: '103',
                    c: '601',
                    d: '110',
                    e: '3283',
                    f: '542'
                },
                {
                    a: '678',
                    b: '143',
                    c: '701',
                    d: '140',
                    e: '3583',
                    f: '582'
                },
                {
                    a: '778',
                    b: '163',
                    c: '801',
                    d: '180',
                    e: '3883',
                    f: '642'
                },
                {
                    a: '778',
                    b: '203',
                    c: '901',
                    d: '190',
                    e: '4283',
                    f: '682'
                },
                {
                    a: '578',
                    b: '203',
                    c: '801',
                    d: '210',
                    e: '4783',
                    f: '742'
                },
            ],
            obj: {
                a: '578',
                b: '103',
                c: '601',
                d: '110',
                e: '3283',
                f: '542'
            },
            ix: 2,
            bhqName: [],
            navList: [
                {
                    name: "功能区划",
                    type: "gnqh",
                    sts: true,
                },
                {
                    name: "网格",
                    type: "wg",
                    sts: false,
                },
            ],
            MapColor: [
                "rgba(255, 59, 46, 0.8)",
                "rgba(255, 222, 46, 0.8)",
                "rgba(4, 178, 169, 0.8)",
                "rgba(203, 255, 252, 0.8)",
                "rgba(114,8,82,.8)",
                "rgba(174,213,13,.8)",
                "rgba(194,133,112,.8)",
                "rgba(225,66,19,.8)",
                "rgba(94,60,190,.8)",
                "rgba(253,166,199,.8)",
            ],
        };
    },
    mounted() {

        let x = 0, vm = this;
        let intervalBox = setInterval(function () {
            if (x > 5) {
                x = 0;
            }
            vm.ix = x;
            x++;
        }, 3000)
        let pie = [
            { value: 4, name: "黑名单" },
            { value: 45, name: "白名单" },
            { value: 45, name: "陌生人" },
            { value: 12, name: "其他" },
        ];
        this.drawpie(pie);
        let hx = ['<=1小时', '1~2小时', '2小时~3小时', '3~5小时', '5~8小时', '>8小时'];
        let hy = [3682, 3300, 3100, 2200, 800, 502];
        this.drawbar1(hx, hy);
        this.drawline();
        // this.getMap();

        (async function f() {
            let res = await http.get("/papi/0000085_json/gnqh.json");
            let arr = [];
            res.data.features.forEach((t) => {
                arr.push(t.properties.name);
            });
            vm.bhqName = arr;
            vm.datamap("gnqh");
        })();

    },
    created() {
        this.areaId = window.sessionStorage.getItem("areaId");
        // this.getEvenDetail();
    },
    methods: {
        drawpie(data) {
            let myChart = echarts.getInstanceByDom(document.getElementById("pie"));
            if (myChart == null) {
                myChart = echarts.init(document.getElementById("pie"));
            }
            let option = {
                color: ["#7FFFFF", "#FFF27F", "#917FFF", "#34CEFF"],
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    top: "5%",
                    left: "center",
                    textStyle: {
                        fontSize: 14, //字体大小
                        color: "#fff",
                    },
                    // data: ['动物', '植物', '真菌']
                },
                series: [
                    {
                        name: "统计",
                        type: "pie",
                        center: ["50%", "60%"],
                        radius: ["40%", "66%"],
                        avoidLabelOverlap: false,
                        labelLine: {
                            show: true,
                        },
                        label: {
                            color: "#fff",
                            fontSize: 14,
                            formatter: function (parmas) {
                                if (parmas.name == "黑名单") {
                                    return parmas.name + "  " + "{dw|" + parmas.value + "}";
                                }
                                if (parmas.name == "白名单") {
                                    return parmas.name + "  " + "{zw|" + parmas.value + "}";
                                }
                                if (parmas.name == "陌生人") {
                                    return parmas.name + "  " + "{zj|" + parmas.value + "}";
                                }
                                if (parmas.name == "其他") {
                                    return parmas.name + "  " + "{zj|" + parmas.value + "}";
                                }
                            },
                            rich: {
                                dw: {
                                    color: "#7FFFFF",
                                    fontSize: 14,
                                },
                                zw: {
                                    color: "#FFF27F",
                                    fontSize: 14,
                                },
                                zj: {
                                    color: "#917FFF",
                                    fontSize: 14,
                                },
                                zj: {
                                    color: "#34CEFF",
                                    fontSize: 14,
                                },
                            },
                        },
                        data: data,
                    },
                ],
            };
            myChart.setOption(option);
            setTimeout(function () {
                myChart.resize();
            }, 100);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },
        getEvenDetail() {
            let _that = this;
            (async function f() {
                let res = await http.get(api.EvenDetail + _that.areaId);
                _that.jbxxOBJ = res.data;
                _that.dsjList = res.data.baseInfo.evenDetail;
                _that.location = res.data.baseInfo.location;
                _that.size = res.data.baseInfo.size;
                _that.setUp = res.data.baseInfo.setUp;
                _that.altitude = res.data.baseInfo.altitude;
            })();
        },
        getMap() {
            let _that = this;
            (async function f() {
                let res = await http.get(api.LevelGroup + "?areaId=" + _that.areaId);
                if (res.data.code == "200") {
                    let ao = res.data.data.animalMap;
                    let po = res.data.data.plantMap;
                    //ao.beijingLevelTwo   po.beijingLevelTwo
                    // let animal = [ao.levelOne, ao.levelTwo, ao.beijingLevelOne];
                    // let plant = [po.levelOne, po.levelTwo, po.beijingLevelOne];
                    //延庆版本
                    let animal = [
                        ao.levelOne,
                        ao.levelTwo,
                        ao.beijingLevelOne,
                        ao.beijingLevelTwo,
                    ];
                    let plant = [
                        po.levelOne,
                        po.levelTwo,
                        po.beijingLevelOne,
                        po.beijingLevelTwo,
                    ];
                    _that.drawBar1(animal);
                    _that.drawBar2(plant);
                    _that.animalsum = ao.sum;
                    _that.Plantsum = po.sum;
                } else {
                    alert(res.data.message);
                }
            })();
        },

        //延庆区颜色
        yqColor(n) {
            if (n == "实验区") {
                return "rgba(203, 255, 252, 0.8)";
            }
            if (n == "核心区") {
                return "rgba(4, 178, 169, 0.8)";
            }
            if (n == "缓冲区") {
                return "rgba(74, 239, 230, 0.8)";
            }
        },
        datamap(flag) {
            this.maptype = flag;
            this.navList.forEach((e) => {
                if (flag == e.type) {
                    e.sts = true;
                } else {
                    e.sts = false;
                }
            });
            if (flag == "gnqh") {
                let url = "/papi/0000085_json/gnqh.json";
                let jsondata = [];
                this.bhqName.forEach((c, x) => {
                    jsondata.push({
                        name: c,
                        value: 1,
                        label: {
                            show: false,
                        },
                        itemStyle: {
                            show: true,
                            areaColor: this.MapColor[x],
                            borderColor: this.MapColor[x],
                            borderWidth: "1",
                        },

                        //延庆版本
                        // itemStyle: {
                        //   show: true,
                        //   areaColor: this.yqColor(c),
                        //   borderColor: this.yqColor(c),
                        //   borderWidth: "1",
                        // },
                    });
                });
                let geo = {
                    type: "map",
                    map: "GeoJson",
                    regions: jsondata,
                    zoom: 1.1,
                    show: true,
                    roam: true,
                };
                this.map(url, geo);
            }
            if (flag == "wg") {
                let geo = {
                    map: "GeoJson",
                    show: true,
                    roam: true,
                    zoom: 1.1,
                    label: {
                        normal: {
                            show: false,
                        },
                        emphasis: {
                            show: true,
                        },
                    },
                    itemStyle: {
                        normal: {
                            areaColor: "rgba(4, 178, 169, 0.8)",
                            borderColor: "#4AEFE6",
                            borderWidth: 1,
                        },
                        emphasis: {},
                    },
                };
                let url = "/papi/0000085_json/wangge.json";
                this.map(url, geo);
            }
        },
        map(url, geo) {
            let vm = this;
            let myChart = echarts.getInstanceByDom(document.getElementById("map"));
            if (myChart == null) {
                // 如果不存在，就进行初始化
                myChart = echarts.init(document.getElementById("map"));
            } else {
                myChart.clear();
            }
            $.getJSON(url, function (geoJson) {
                echarts.registerMap("GeoJson", geoJson);
                myChart.showLoading("default", {
                    text: "加载中，请稍候...",
                    maskColor: "rgba(0,0,0,.3)",
                    textColor: "#fff",
                });
                let option = {
                    geo: geo,
                    series: [
                        {
                            type: "scatter",
                            coordinateSystem: "geo",
                            symbol: "image:///static/images/yqq.png",
                            legendHoverLink: true,
                            symbolSize: [16, 18],
                            data: [
                                { value: [118.88422346000004, 28.356681146000028] },
                                { value: [118.84547874010157, 28.356681146000028] },
                                { value: [118.86594210475171, 28.356681146000028] },
                                { value: [118.86356264374587, 28.356681146000028] },
                                { value: [118.87260459556803, 28.356681146000028] },
                                { value: [118.88366908924515, 28.356681146000028] },
                                { value: [118.88497779279835, 28.356681146000028] },
                                { value: [118.89663715172692, 28.356681146000028] },

                            ],
                            showEffectOn: "render",
                            rippleEffect: {
                                brushType: "stroke",
                            },
                            hoverAnimation: true,
                            zlevel: 1,
                        },
                    ],
                };
                myChart.setOption(option, true);
                setTimeout(function () {
                    myChart.hideLoading();
                    myChart.resize();
                }, 500);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            });
        },
        drawbar1(x, y) {
            let myChart = echarts.getInstanceByDom(document.getElementById("bar1"));
            if (myChart == null) {
                myChart = echarts.init(document.getElementById("bar1"));
            }
            let option = {
                yAxis: {
                    type: "category",
                    axisLabel: {
                        textStyle: {
                            color: "#fff",
                        },
                    },
                    axisTick: {
                        //y轴刻度线
                        show: false
                    },
                    axisLine: {
                        show: false // 不显示坐标轴线
                    },
                    data: x,
                },
                xAxis: {
                    type: "value",
                    axisLabel: {
                        textStyle: {
                            color: "#fff",
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255, 255, 255, 0.1)",
                        },
                    },
                },
                grid: {
                    top: "10%",
                    left: "20%",
                    right: "5%",
                    bottom: "10%",
                },
                series: [
                    {
                        data: y,
                        type: "bar",
                        showBackground: true,
                        barWidth: 22,
                        label: {
                            show: true,
                            position: "right",
                            color: "#fff",
                        },
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgba(59, 41, 255, 0)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(255, 139, 202, 1)'
                                    }
                                ])
                            }
                        },
                        backgroundStyle: {
                            color: "rgba(255, 255, 255, 1)",
                            opacity: 0.1,
                        },
                    },
                ],
            };
            myChart.setOption(option);
            setTimeout(function () {
                myChart.resize();
            }, 100);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },
        drawline() {
            let myChart = echarts.getInstanceByDom(document.getElementById("line"));
            if (myChart == null) {
                myChart = echarts.init(document.getElementById("line"));
            }
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '4%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        axisTick: {
                            show: false // 不显示坐标轴刻度线
                        },
                        axisLine: {
                            show: false // 不显示坐标轴线
                        },
                        data: ['00', '03', '06', '09', '12', '15', '18']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '入园区',
                        type: 'line',
                        // stack: 'Total',
                        lineStyle: {
                            normal: {
                                color: '#FFF27F',
                                width: '2'
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#FFF27F',
                                borderColor: '#FFF27F',
                                borderWidth: 1
                            }
                        },
                        symbolSize: 10,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(255, 242, 127, 0.6)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(255, 242, 127, 0)'
                                }
                            ])
                        },
                        smooth: true,
                        data: [0, 0, 320, 780, 3300, 800, 220]
                    },
                    {
                        name: '出园区',
                        type: 'line',
                        // stack: 'Total',
                        smooth: true,
                        lineStyle: {
                            normal: {
                                color: '#917FFF',
                                width: '2'
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#917FFF',
                                borderColor: '#917FFF',
                                borderWidth: 1
                            }
                        },
                        symbolSize: 10,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(145, 127, 255, 0.6)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(145, 127, 255, 0)'
                                }
                            ])
                        },
                        data: [0, 0, 120, 320, 500, 2700, 120]
                    }
                ]
            };
            myChart.setOption(option);
            setTimeout(function () {
                myChart.resize();
            }, 100);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }
    },
};
</script>
  
<style scoped>
@import "../../static/css/jbxx.css";
</style>
  